<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户管理</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../resource/css/layui.css">
	<link rel="stylesheet" href="../../../resource/css/common.css">
</head>
<body>
	<div class="demoTable" style="font-size: 14px;">
		登录名:
		<div class="layui-inline">
			<input class="layui-input" name="loginName" id="loginName" autocomplete="off">
		</div>
		用户姓名:
		<div class="layui-inline">
			<input class="layui-input" name="userName" id="userName" autocomplete="off">
		</div>
		<button class="layui-btn" data-type="add" >新增</button>
		<button class="layui-btn layui-btn-normal" data-type="reload">查询</button>
	</div>
	<table id="tb" class="canScroll" lay-filter="userTable-filter"></table>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
		{{# if(d.isValid == 0){ }}
		<a class="layui-btn layui-btn-normal" lay-event="open">启用</a>
   		{{# }else{ }}
		<a class="layui-btn layui-btn-warm" lay-event="stop">停用</a>
   		{{# } }}
		<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="indexTpl">
    	{{d.LAY_TABLE_INDEX+1}}
	</script>
	<script src="../../../resource/js/layui.js"></script>
	<script type="text/javascript">
		layui.use(['table', 'laypage', 'form'], function(){
			var table 	= layui.table;
			var $ 		= layui.$ || parent.window.mod.jquery;
			var form 	= layui.form;
			var laypage = layui.laypage;
			productsearch(1, 5);	// 从第几页开始显示 一页显示多少条数据
			function productsearch(curnum,limitcount) {
				var index = layer.load(1, {
					shade: [0.6,'#000'] //透明度 色值
				});
				setTimeout(function(){layer.close(index)}, 5000);
				table.render({
					elem: $('#tb'),				// 表格元素
					id: 'tb',
					url	: localStorage.serverHttp+'/base/auth/user/getAll?_token='+(new parent.window._user()).getData('token'),		// 请求路径
					even: true,						// 开启隔行背景
					method: 'get',					// 请求类型 默认get
					where: {						// 请求的其他参数(除开page和limit)
						loginName: $('#loginName').val(),
						userName:$('#userName').val(),
						page: curnum,
						limit: limitcount
					},
					cols: [[						// 表头
						{checkbox: true}
						,{field: '', title: '序号',templet: '#indexTpl', width: 120}
						,{field: 'loginName', title: '登录名', width: 120}
						,{field: 'userName', title: '用户姓名', width: 120}
						,{field: 'sex', title: '性别', width: 120}
						,{field: 'phone', title: '电话', width: 120} 
						,{field: 'email', title: '邮箱', width: 120} 
						,{field: 'isValid', title: '状态', width: 120}
						,{field: '', title: '操作',toolbar:"#barDemo", width: 300}
					]],
					done: function(res, curr, count){// 加载完table后执行的方法 res：返回数据 curr：当前页码 count：一页显示个数
						parent.window.resizeIframe(window.frameElement, document.getElementsByTagName('html')[0]);
						parent.window.tableHeaderFixed($, this.elem, 0, true);
						layer.close(index);
						this.elem.next().append('<div class="layui-table-page" id="laypage1"></div>');
						laypage.render({  
							elem:'laypage1'
							,count:count
							,curr:curnum
							,limit:limitcount
							,groups: 3 //连续显示分页数  
							,skip: true //是否开启跳页  
							,first: '首页' //若不显示，设置false即可  
							,last: '尾页' //若不显示，设置false即可  
							,limits: [5, 10, count]				// 每页显示个数的可选值
							,layout: ['prev', 'page', 'next', 'skip','count','limit']  
							,jump:function (obj,first) {  
								if(!first){  
									curnum = obj.curr;  
									limitcount = obj.limit;   
									productsearch(curnum,limitcount);  
								}  
							}  
						});
						//处理性别列
						$("[data-field='sex']").children().each(function(){  
							if($(this).text()=='0'){  
							$(this).text("女")  
							}else if($(this).text()=='1'){  
							$(this).text("男")  
							}  
						});
						//处理状态列
						$("[data-field='isValid']").children().each(function(){  
							if($(this).text()=='0'){  
							$(this).text("停用")  
							}else if($(this).text()=='1'){  
							$(this).text("启用")  
							}  
						});
					}
				});
			}
			table.on('tool(userTable-filter)', function(obj){
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象
				
				if(layEvent === 'edit'){ //编辑
					var userEditData= [
						{'field': 'id', 'title': 'ID','id':'userId', 'type': 'input-text', 'display': 'none', 'value': data.id},
						{'field': 'loginName', 'title': '登录名','id':'loginName', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入登录名', 'value': data.loginName, 'width': '180px'},
						{'field': 'password', 'title': '默认密码','id':'password', 'type': 'input-text', 'display': 'none',   'value': data.password},
						{'field': 'userName', 'title': '用户名','id':'userName', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入用户名', 'value': data.userName, 'width': '180px'},
						{'field': 'sex', 'title': '性别','id':'sex', 'type': 'select', 'display': 'block', 'verify': 'required', 'placeholder': '请选择', 'value': data.sex, 'url': '', 'data': {}, 'options': ['0','1'], 'readonly': true, rule: {0:'女', 1:'男'} },
						{'field': 'phone', 'title': '电话','id':'phone', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入电话', 'value': data.phone, 'width': '230px'},
						{'field': 'email', 'title': '邮箱','id':'email', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入邮箱', 'value': data.email, 'width': '230px'}
						];
					parent.window.layerOpenParams($, layer, userEditData, 'editUser', editUser);
					form.render();
					$("#sex").next().width('150px');
				} else if(layEvent === 'stop'){ //停用
					layer.confirm('你确定要停用该用户吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp+'/base/auth/user/stop?_token='+(new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			userId : data.id
				    		}
				    	})
				    	.done(function(res) {
				    		layer.msg('停用成功');
				    		active.reload.call();
				    	});
					});
				} else if(layEvent === 'open'){ //启用
					layer.confirm('你确定要启用该角色吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp+'/base/auth/user/open?_token='+(new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			userId : data.id
				    		}
				    	})
				    	.done(function(res) {
				    		layer.msg('启用成功');
				    		active.reload.call();
				    	});
					});
				} else if(layEvent === 'del'){ //删除
					layer.confirm('你确定要删除该用户吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp+'/base/auth/user/delete?_token='+(new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			userId : data.id
				    		}
				    	})
				    	.done(function(res) {
				    		layer.msg('删除成功');
				    		active.reload.call();
				    	});
					});
				}
			});
			active = {
				reload: function(){
					//执行重载
					table.reload('tb', {
						where: {
							loginName: $('#loginName').val(),
		  					userName:$('#userName').val()
						}
					});
				},
				
				add: function(){
					var arrInputs = [
						//表头名(field),显示名(title),表单类型(type),显示形式(display),验证条件(verify),提示文字(placeholder),默认初始值(value),请求路径(url),请求参数(data),固定选项(options),宽度(width),id(id属性值),readonly(只读属性，select元素无效)，rule(转换规则)
						{'field': 'loginName', 'title': '登录名','id':'loginName', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入登录名', 'value': '', 'width': '180px'},
						{'field': 'password', 'title': '默认密码','id':'password', 'type': 'input-text', 'display': 'none',   'value': '123456'},
						{'field': 'userName', 'title': '用户名','id':'userName', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入用户名', 'value': '', 'width': '180px'},
						{'field': 'sex', 'title': '性别', 'type': 'select','id':'sex', 'display': 'block', 'verify': 'required', 'placeholder': '请选择', 'value': '', 'url': '', 'data': {}, 'options': ['0','1'], 'id': 'sex', 'readonly': true, rule: {0:'女', 1:'男'} },
						{'field': 'phone', 'title': '电话','id':'phone', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入电话', 'value': '', 'width': '230px'},
						{'field': 'email', 'title': '邮箱','id':'email', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入邮箱', 'value': '', 'width': '230px'}
					];
					parent.window.layerOpenParams($, layer, arrInputs, 'adduser', saveUser);
					form.render();
					$("#sex").next().width('150px');
				}
			};
			
			$('.demoTable .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});

		function  editUser(formId,index,$){
			var formObj = $("#"+formId);
			var userId = formObj.find("#userId").val();
			var password = formObj.find("#password").val();
			var loginName = formObj.find("#loginName").val();
			var userName = formObj.find("#userName").val();
			var phone = formObj.find("#phone").val();
			var email = formObj.find("#email").val();
			var sex = formObj.find("#sex").next().find('.layui-this').attr("lay-value");
			$.ajax({
				url: localStorage.serverHttp+'/base/auth/user/edit?_token='+(new parent.window._user()).getData('token'),
				type: 'post',
				dataType: 'json',
				data:{
					id:userId,
					password:password,
					loginName : loginName,
					userName:userName,
					phone:phone,
					email:email,
					sex:sex
				}
			})
			.done(function(res) {
				if(res){
					if(1 == res){
						layer.msg("修改用户成功");
						layer.close(index);
						active.reload.call();
					}else{
						if(res.msg){
							layer.msg(res.msg);
						}
					}
				}
			});
			
		}


		function saveUser(formId,index,$) {
			var formObj = $("#"+formId);
			var password = formObj.find("#password").val();
			var loginName = formObj.find("#loginName").val();
			var userName = formObj.find("#userName").val();
			var phone = formObj.find("#phone").val();
			var email = formObj.find("#email").val();
			var sex = formObj.find("#sex").next().find('.layui-this').attr("lay-value");
			$.ajax({
				url: localStorage.serverHttp+'/base/auth/user/add?_token='+(new parent.window._user()).getData('token'),
				type: 'post',
				dataType: 'json',
				data:{
					password:password,
					loginName : loginName,
					userName:userName,
					phone:phone,
					email:email,
					sex:sex
				}
			})
			.done(function(res) {
				if(res){
					if(1 == res){
						layer.msg("新增用户成功");
						layer.close(index);
						active.reload.call();
					}else{
						if(res.msg){
							layer.msg(res.msg);
						}
					}
				}
			});
			
		}
	</script>
	
</body>
</html>